<template>
  <div class="historical_disaster_list">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="灾害管理" name="first">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="灾害编号">
          </el-table-column>
          <el-table-column prop="name" label="灾害名称">
          </el-table-column>
          <el-table-column prop="level" label="灾害等级">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          <el-table-column prop="time" label="发灾时间">
          </el-table-column>
          <el-table-column prop="person" label="受灾人口">
          </el-table-column>
          <el-table-column prop="property" label="受灾财产">
          </el-table-column>
          <el-table-column prop="death" label="死亡人口">
          </el-table-column>
          <el-table-column prop="longitude" label="经度">
          </el-table-column>
          <el-table-column prop="latitude" label="纬度">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <div class="one">
          <span>灾点编号</span>
          <el-input v-model="input1" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <div class="one1">
          <span>名称</span>
          <el-input v-model="input2" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <div class="one2">
          <span>地址</span>
          <el-input v-model="input3" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <div class="one3">
          <span>发灾时间</span>
          <el-date-picker v-model="value1" style="width:200px" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="one4">
          <span>受灾人口</span>
          <el-input v-model="input4" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <div class="one5">
          <span>受灾财产</span>
          <el-input v-model="input5" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <div class="one6">
          <span>死亡人口</span>
          <el-input v-model="input6" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <div class="one7">
          <span>灾情等级</span>
          <el-select v-model="value" style="width:200px" placeholder="请选择">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button style="width:200px;margin-top:10px">地图定位</el-button>
        <div class="one8">
          <span>经度</span>
          <el-input v-model="input7" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <div class="one9">
          <span>纬度</span>
          <el-input v-model="input8" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <div class="one10">
          <span>备注</span>
          <el-input type="textarea" :rows="2" style="width:200px" placeholder="请输入内容" v-model="textarea">
          </el-input>
        </div>
        <div class="button">
          <el-button>新建</el-button>
          <el-button>添加</el-button>
          <el-button>修改</el-button>
          <el-button>删除</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="灾害查询" name="second">
        <div class="date1">
          <span>时间</span>
          <el-date-picker v-model="value2" style="width:200px" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="date2">
          <span>至</span>
          <el-date-picker v-model="value3" style="width:200px" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="level">
          <span>灾情等级</span>
          <el-select v-model="value" style="width:200px" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="name">
          <span>灾点名称</span>
          <el-input v-model="input9" style="width:200px" placeholder="请输入内容"></el-input>
        </div>
        <el-button style="width:200px;margin:10px 0">查询</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      tableData: [{
        number: 'CDZD001 ',
        name: '古溶溪村山洪灾害 ',
        level: '中型',
        address: '湖南桃源县茶庵铺镇古溶溪村',
        time: '2016-03-16',
        person: '2',
        property: '130000',
        death: '0',
        longitude: '111.159648',
        latitude: '28.615425',
        remark: '',
      }],
      textarea: '',
      value1: "",
      value2: "",
      value3: "",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      input7: "",
      input8: "",
      input9: "",
      options1: [{
        value: '选项1',
        label: '中型'
      }],
      options2: [{
        value: '选项1',
        label: '中型'
      }],
      value: "选项1"
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>
<style scoped lang="less">
.historical_disaster_list {
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 10px;
  box-sizing: border-box;
}

.historical_disaster_list .el-tabs {
  width: calc(100% - 15px);

  /deep/ .el-tabs__content {
    width: 100%;
    border: 1px solid;
  }

  /deep/ .el-tabs__header {
    margin: 0;
  }
}

.historical_disaster_list .el-tabs .el-tab-pane {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .el-table {
    width: 100%;
    border: 1px solid;
  }

  .one,
  .one1,
  .one2,
  .one3,
  .one4,
  .one5,
  .one6,
  .one7,
  .one8,
  .one9,
  .one10,.date1,.date2,.level,.name {
    width: 260px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }

  .button {
    width: 260px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-button {
      width: 120px;
      margin: 10px 0;
    }
  }
}</style>